<template>
  <view class="goods_detail">
    <!-- 轮播图开始 -->
    <view class="good_swiper">
      <swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item, index) in goodObj.pics" :key="item.pics_id">
          <!-- 轮播图图片 -->
          <image :src="item.pics_mid" mode="widthFix" @tap="openImg(index)"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图结束 -->
    <view class="good_price">¥ {{ goodObj.goods_price }}</view>
    <!-- 商品收藏开始 -->
    <view class="good_info">
      <view class="good_name">{{ goodObj.goods_name }}</view>
      <view class="good_collection">
        <view :class="['iconfont', [isShouChang ? 'icon-star2' : 'icon-star']]"></view>
        <view class="name">收藏</view>
        <button type="primary" size="mini" @tap="addShouCang"></button>
      </view>
    </view>
    <!-- 商品收藏结束 -->
    <!-- 图文详情开始 -->
    <view class="good_introduce">
      <!-- 图文详情 -->
      <view class="good_title">图文详情</view>
      <rich-text :nodes="goodObj.goods_introduce"></rich-text>
    </view>
    <!-- 图文详情结束 -->
    <!-- 底部工具栏开始 -->
    <view class="good_tools">
      <view class="tools_item">
        <view class="iconfont icon-kefu"></view>
        <view class="name">客服</view>
        <button type="primary" open-type="contact"></button>
      </view>
      <view class="tools_item">
        <view class="iconfont icon-fenxiang"></view>
        <view class="name">分享</view>
        <button type="primary" open-type="share"></button>
      </view>
      <view class="tools_item">
        <view class="iconfont icon-cart"></view>
        <view class="name">购物车</view>
        <navigator url="../cart/cart" open-type="switchTab"></navigator>
      </view>
      <view class="tools_item add_cart">
        <view class="icon"></view>
        <view class="name">加入购物车</view>
        <button type="primary" @tap="addCart"></button>
      </view>
      <view class="tools_item now_buy">
        <view class="icon"></view>
        <view class="name">立即购买</view>
      </view>
    </view>
    <!-- 底部工具栏结束 -->
  </view>
</template>

<script>
export default {
  // 生命周期 页面加载
  onLoad(data) {
    var _me = this;
    // console.log(data);
    _me.goods_id = data.goods_id;
    _me.getGoodsDetail();

    var shouCang = uni.getStorageSync('shoucang') || [];
    shouCang.forEach(function(item, index) {
      if (item.goods_id == _me.goods_id) {
        _me.isShouChang = true;
      }
    });
  },
  data() {
    return {
      goods_id: 0,
      goodObj: {
        goods_id: 0,
        goods_small_logo: '',
        goods_name: '',
        goods_price: 0,
        goods_introduce: '',
        pics: []
      },
      bigPics: [],
      isShouChang: false
    };
  },
  methods: {
    /* 获取物品信息内容 */
    getGoodsDetail() {
      var _me = this;
      uni.request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',
        data: {
          goods_id: _me.goods_id,
          bigPics: []
        },
        success(e) {
          // console.log(e);
          _me.goodObj.goods_id = e.data.message.goods_id;
          _me.goodObj.goods_small_logo = e.data.message.goods_small_logo;
          _me.goodObj.goods_name = e.data.message.goods_name;
          _me.goodObj.goods_price = e.data.message.goods_price;
          _me.goodObj.goods_introduce = e.data.message.goods_introduce;
          _me.goodObj.pics = e.data.message.pics;
          e.data.message.pics.forEach(function(data) {
            _me.bigPics.push(data.pics_big_url);
          });
          // console.log(_me.goodObj);
        }
      });
    },
    openImg(index) {
      var _me = this;
      uni.previewImage({
        urls: _me.bigPics,
        current: index,
        indicator: 'default'
      });
    },
    addCart() {
      var _me = this;
      // 旧的购物车
      var oldCart = uni.getStorageSync('cart') || [];
      // 取该商品下标
      var index = oldCart.findIndex(function(item) {
        return item.goods_id == _me.goods_id;
      });
      if (index == -1) {
        // 不存在
        var newObj = {};
        newObj.goods_id = _me.goods_id;
        newObj.goods_small_logo = _me.goodObj.goods_small_logo == '' ? 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg' : _me.goodObj.goods_small_logo;
        newObj.goods_name = _me.goodObj.goods_name;
        newObj.goods_price = _me.goodObj.goods_price;
        newObj.num = 1;
        newObj.checked = true;
        oldCart.push(newObj);
        index = oldCart.length - 1;
      } else {
        // 存在
        oldCart[index].num++;
      }
      // console.log('新购物车', oldCart);
      // console.log('新数量', oldCart[index].num);
      uni.setStorage({
        key: 'cart',
        data: oldCart
      });
      uni.showToast({
        title: '添加成功',
        mask: true,
        duration: 500
      });
    },
    /* 收藏 */
    addShouCang() {
      var _me = this;
      var shouCang = uni.getStorageSync('shoucang') || [];
      var shouCangIndex = -1;
      shouCang.forEach(function(item, index) {
        if (item.goods_id == _me.goods_id) {
          return (shouCangIndex = index);
        }
      });
      if (shouCangIndex == -1) {
        // 没找到
        shouCang.push(_me.goodObj);
        uni.setStorageSync('shoucang', shouCang);
        // 添加收藏
        _me.isShouChang = true;
      } else {
        // 已找到
        shouCang.splice(shouCangIndex, 1);
        uni.setStorageSync('shoucang', shouCang);
        _me.isShouChang = false;
      }
    }
  }
};
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 90rpx;
  /* 轮播图开始 */
  .good_swiper {
    swiper {
      width: 750rpx;
      height: 750rpx;
      text-align: center;
      swiper-item {
        image {
          width: 750rpx;
          height: 750rpx;
        }
      }
    }
  }
  /* 轮播图结束 */
  .good_price {
    font-size: 60rpx;
    color: #ff0000;
  }
  /* 商品收藏开始 */
  .good_info {
    display: flex;
    padding: 10rpx 0rpx;
    border: {
      top: 2rpx solid #cccccc;
      bottom: 2rpx solid #cccccc;
    }
    .good_name {
      flex: 5;
      padding: 0rpx 15rpx;
      font-size: 40rpx;
      color: #000000;

      // 多行隐藏
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .good_collection {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 35rpx;
      border-left: 2rpx solid #cccccc;
      .iconfont {
        color: $themeColor;
      }
      button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
  /* 商品收藏结束 */
  /* 图文详情开始 */
  .good_introduce {
    .good_title {
      font-size: 45rpx;
      font-weight: bolder;
      padding: 10rpx 30rpx;
      color: $themeColor;
    }
  }
  /* 图文详情结束 */
  /* 底部工具栏开始 */
  .good_tools {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 2rpx solid #cccccc;
    height: 90rpx;
    display: flex;
    .tools_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
      position: relative;
    }
    .add_cart {
      flex: 2;
      background-color: #ffa500;
      font-weight: bold;
      color: #ffffff;
    }
    .now_buy {
      flex: 2;
      background-color: $themeColor;
      font-weight: bold;
      color: #ffffff;
    }
    button,
    navigator {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
  /* 底部工具栏结束 */
}
</style>
